<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>大美江西 - 诗画赣鄱</title>
    <link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
        /* 全局基础设置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* 全局变量定义 */
        :root {
            /* 主色调 */
            --primary-green: #2D6A4F;     /* 青山绿（主色调） */
            --primary-red: #BC3C29;       /* 文化红（强调色） */
            --primary-brown: #5C4033;     /* 土地棕（文本主色） */
            
            /* 辅助色 */
            --secondary-blue: #2A9D8F;    /* 湖泊蓝（水域相关） */
            --secondary-yellow: #E9C46A;  /* 楼阁黄（历史建筑） */
            
            /* 中性色 */
            --white: #FFFFFF;             /* 纯白 */
            --off-white: #F5F5F5;         /* 瓷都白（背景色） */
            --gray-light: #f3f4f6;        /* 浅灰 */
            --gray-medium: #9ca3af;       /* 中灰 */
            --gray-dark: #374151;         /* 深灰 */
            
            /* 字体定义 */
            --font-calligraphy: 'Ma Shan Zheng', cursive;
            --font-sans: 'Noto Sans SC', sans-serif;
        }

        /* 基础动画 */
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        /* 页面容器 */
        .page-container {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            padding-top: 4rem; /* 为导航栏预留空间 */
            font-family: var(--font-sans);
            color: var(--primary-brown);
            background-color: var(--off-white);
        }

        /* 页面内容通用样式 */
        .page-content {
            display: none;
            animation: fadeIn 0.5s ease-in-out;
            flex-grow: 1;
        }

        .page-content.active {
            display: block;
        }

        /* 1. 导航栏区块 */
        .navbar {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 50;
            padding: 1rem 4vw;
            background-color: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(4px);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .navbar__logo {
            text-decoration: none;
            display: flex;
            align-items: center;
        }

        .navbar__logo-text {
            font-family: var(--font-calligraphy);
            font-size: 1.25rem;
            color: var(--primary-green);
        }

        .navbar__links {
            display: flex;
            gap: 2rem;
            align-items: center;
        }

        .navbar__link {
            text-decoration: none;
            color: var(--primary-brown);
            font-weight: 500;
            transition: color 0.3s ease;
        }

        .navbar__link:hover {
            color: var(--primary-green);
        }

        /* 2. 首页头部区块 */
        .hero {
            position: relative;
            height: 70vh;
            overflow: hidden;
        }

        .hero__bg {
            position: absolute;
            inset: 0;
            z-index: 0;
        }

        .hero__bg-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .hero__bg-overlay {
            position: absolute;
            inset: 0;
            background-color: rgba(0, 0, 0, 0.3);
        }

        .hero__content {
            position: relative;
            z-index: 10;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 0 4vw;
        }

        .hero__title {
            font-family: var(--font-calligraphy);
            font-size: clamp(2.5rem, 6vw, 5rem);
            color: var(--white);
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
            margin-bottom: 1.5rem;
        }

        .hero__subtitle {
            color: var(--white);
            font-size: clamp(1rem, 3vw, 1.5rem);
            max-width: 48rem;
            margin-bottom: 2rem;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
        }
    </style>
</head>
<body>
    <!-- 顶部导航栏 -->
    <nav class="navbar">
        <a href="#" class="navbar__logo page-link" data-page="home">
            <span class="navbar__logo-text">江西旅游</span>
        </a>
        
        <div class="navbar__links">
            <a href="#" class="navbar__link page-link" data-page="home">首页</a>
            <a href="#" class="navbar__link page-link" data-page="categories">江西必去景点</a>
            <a href="#" class="navbar__link page-link" data-page="travel-tips">旅游贴士</a>
            <a href="#" class="navbar__link page-link" data-page="contact">联系我们</a>
        </div>
    </nav>

    <!-- 页面容器 -->
    <div class="page-container">
        <!-- 首页内容 -->
        <div id="home" class="page-content active">
            <!-- 顶部：江西旅游概览 -->
            <header class="hero">
                <div class="hero__bg">
                    <img src="https://picsum.photos/id/29/1920/1080" alt="江西山水风光" class="hero__bg-img">
                    <div class="hero__bg-overlay"></div>
                </div>
                
                <div class="hero__content">
                    <h1 class="hero__title">大美江西，诗画赣鄱</h1>
                    <p class="hero__subtitle">探索江西必去景点，感受自然与人文的交融之美</p>
                </div>
            </header>
        </div>

        <!-- 其他页面占位 -->
        <div id="categories" class="page-content">
            <h2>江西必去景点</h2>
        </div>
        
        <div id="travel-tips" class="page-content">
            <h2>旅游贴士</h2>
        </div>
        
        <div id="contact" class="page-content">
            <h2>联系我们</h2>
        </div>
    </div>

    <script>
        // 页面切换功能
        document.addEventListener('DOMContentLoaded', function() {
            const pageLinks = document.querySelectorAll('.page-link');
            const pageContents = document.querySelectorAll('.page-content');
            
            function switchPage(pageId) {
                pageContents.forEach(page => {
                    page.classList.remove('active');
                });
                
                const targetPage = document.getElementById(pageId);
                if (targetPage) {
                    targetPage.classList.add('active');
                    window.scrollTo({
                        top: 0,
                        behavior: 'smooth'
                    });
                }
            }
            
            pageLinks.forEach(link => {
                link.addEventListener('click', function(e) {
                    e.preventDefault();
                    const pageId = this.getAttribute('data-page');
                    if (pageId) {
                        switchPage(pageId);
                    }
                });
            });
        });
    </script>
</body>
</html>